/**
 * @author shaosong
 * @description SignIn
 */
import {
  Card,
  CardHeader,
  CardBody,
  Image,
  Button,
  CardFooter
} from '@nextui-org/react'
import React from 'react'
import { useRouter } from 'next/navigation'
import EmailInput from '../Input/EmailInput'
import PassWordInput from '../Input/PasswordInput'
import GithubSignInButton from '../button/GithubSignInButton'
import { Divider } from 'antd'

export class SignInProps {}

const SignIn: React.FC<SignInProps> = props => {
  const { push } = useRouter()

  return React.useMemo(
    () => (
      <Card className="min-w-[400px] p-6">
        <CardHeader className="flex gap-3 p-4">
          <Image
            alt="nextui logo"
            height={40}
            radius="sm"
            src="https://pic.imgdb.cn/item/66729435d9c307b7e9620dda.png"
            width={40}
          />
          <div className="flex flex-col">
            <p className="text-md">Next BACK TEMP</p>
            <p className="text-small text-default-500">next.batype.com</p>
          </div>
        </CardHeader>
        <CardBody>
          <GithubSignInButton />
        </CardBody>
        <Divider plain className="!m-0">
          或者
        </Divider>
        <CardBody className="p-4 space-y-10">
          <EmailInput defaultValue="8@batype.com" />

          <PassWordInput />

          <Button className="w-full" color="primary">
            登录
          </Button>
        </CardBody>

        <Divider className="!m-0" />

        <CardFooter className="p-4 flex justify-center items-center">
          <span className="text-gray-400 text-sm">
            还没有账户？
            <a
              className="text-black cursor-pointer"
              onClick={() => push('/sign-up')}
            >
              注册
            </a>
          </span>
        </CardFooter>
      </Card>
    ),
    []
  )
}

export default SignIn
